<template>

  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">

      <el-form-item label="用户名" class="flex-50" prop="userName" v-if="isType('save')">
        <el-input v-model="dataInfo.userName" class="cms-width"></el-input>
      </el-form-item>

      <el-form-item label="用户名" class="flex-50" v-if="isType('update')">
        <el-input v-model="dataInfo.userName" class="cms-width" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="部门" class="flex-50" >
        <el-select @change="selectDepartChange" v-model="dataInfo.departId" clearable placeholder="请选择"
                   :disabled="true">
          <el-option v-for="item in departList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="姓名" class="flex-50" prop="realName">
        <el-input v-model="dataInfo.realName" class="cms-width"></el-input>
      </el-form-item>

      <el-form-item label="作者名称" class="flex-50" prop="penName">
        <el-input v-model="dataInfo.penName" class="cms-width"></el-input>
      </el-form-item>

      <el-form-item label="推荐到文化" class="flex-50" prop="isRecommend" style="display: none;">
        <el-radio-group v-model="dataInfo.isRecommend">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否展示" class="flex-100" prop="isShow">
        <el-radio-group v-model="dataInfo.isShow">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="排序" class="flex-50">
        <el-input v-model="dataInfo.channelSort" class="cms-width" type="number"></el-input>
      </el-form-item>

      <el-form-item label="出生日期" class="flex-50">
        <el-date-picker v-model="dataInfo.birthday" type="date" class="cms-width" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="手机" class="flex-50" prop="mobile">
        <el-input v-model="dataInfo.mobile" class="cms-width"></el-input>
      </el-form-item>

      <el-form-item label="描述" class="flex-100">
        <el-input v-model="dataInfo.intro" class="cms-width" type="textarea"></el-input>
      </el-form-item>

      <el-form-item label="头像" class="flex-100" prop="userImg">
        <cms-upload :src="dataInfo.userImg" :isMark="false" @change="getUserImg" uploadPath="images"></cms-upload>
        <span class="red">头像上传尺寸：190*280</span>
      </el-form-item>

      <el-form-item label="封面图" class="flex-100" prop="descriptionImg">
        <cms-upload :src="dataInfo.descriptionImg" :isMark="false" @change="getDescriptionImg" uploadPath="images"></cms-upload>
        <span class="red">封面图片上传尺寸：1200*363</span>
      </el-form-item>

      <div class="form-footer">
        <el-button type="primary" v-if="isType('save')" @click="add(false)" v-perms="'/cultureColumnist/save'">添加</el-button>
        <el-button type="primary" v-if="isType('update')" @click="update()" v-perms="'/cultureColumnist/update'">修改</el-button>
        <el-button type="info" @click="$reset">重置</el-button>
      </div>

    </el-form>

  </section>

</template>

<script>
  import axios from "axios";
  import va from "@/rules";
  import formMixns from "@/mixins/form";

  export default {
    mixins: [formMixns], //普通表单变量
    data() {
      let self = this;

      let required = va.required('此项必填');
      let validateName = va.validateName('用户名已存在');

      return {
        passwordMinLen: '',
        rules: {
          //校验规则
          userName: [required, validateName],
          realName: [required],
          penName: [required],
          userImg: [required],
          descriptionImg: [required],
          channelSort: [required]
        },
        departList: [],
        dataInfo: {
          realName:'',
          penName:'',
          userImg: '',
          descriptionImg: '',
          isRecommend: 0,
          isShow: 0,
          departId:5,
          channelSort:99
        }
      };
    },
    methods: {
      getDataInfo(id, type) {
        //重写获取表单数据
        this.getDepartList();
        if (type == 'update') {
          this.getUserInfo(id);
        }
      },
      getUserInfo(id) {
        axios.post(this.$api.userGet, {userId: id}).then(res => {
          if (res.code == '200') {
            this.dataInfo = res.body;
            this.passwordMinLen = res.body.passwordMinLen;
            this.loading = false;
          }
        })
      },
      getDepartList() {
        axios.post(this.$api.departmentList, {all:true}).then(res => {
          this.loading = false
          if (res.code == '200') {
            this.departList = res.body;
          }
        })
      },
      selectDepartChange(val) {
        this.dataInfo.departId = val;
      },
      add(state) {
        //自定义一下处理方法
        this.saveDataInfo(state, this.$api.userSave, this.dataInfo, "pageList");
      },
      update() {
        this.updateDataInfo(this.$api.userUpdate, this.dataInfo, "pageList");
      },
      getUserImg(url, index, pIndex) {
        this.dataInfo.userImg = url;
        this.$refs['form'].clearValidate(['userImg']);
      },
      getDescriptionImg(url, index, pIndex) {
        this.dataInfo.descriptionImg = url;
        this.$refs['form'].clearValidate(['descriptionImg']);
      },
      inputUpdate(){
        this.$forceUpdate();
      },
    },
    created() {
      this.getDataInfo(this.id, this.type);
    }
  };
</script>

<style>
</style>
